<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!doctype html>
<html>
  <head>
      <title>登陆</title>
      <link type="text/css" rel="stylesheet" href="${ pageContext.request.contextPath }/style/reset.css">
      <link type="text/css" rel="stylesheet" href="${ pageContext.request.contextPath }/style/main.css">
      <!--[if IE 6]>
      <script type="text/javascript" src="${ pageContext.request.contextPath }/js/DD_belatedPNG_0.0.8a-min.js"></script>
      <script type="text/javascript" src="${ pageContext.request.contextPath }/js/ie6Fixpng.js"></script>
      <![endif]-->
	  <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.js"></script>
	  <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.validate-1.13.1.js"></script>
	  <script type="text/javascript">
		  //等待dom元素加载完毕.
		  $(document).ready(function(){
			  $("#username").focus(function(){             //获得鼠标焦点
				  var txt_value = $(this).val();           //得到当前文本地址
				  if ( txt_value == this.defaultValue) {
					  $(this).val("");
				  }
			  });
			  $("#username").blur(function(){
				  var txt_value = $(this).val();
				  if (txt_value == "") {
					  $(this).val("请输入登录邮箱/手机号");
				  }
			  });

			  $("#form").validate({
				  rules: {
					  username: {
						  required: true,
						  remote: {
							  url: "check",
							  type: "post",
							  data: {
								  username: function() {
									  return $("#username").val();
								  }
							  }
						  }
					  },
					  password: {
						  required: true,
						  minlength: 2,
						  maxlength: 16
					  }
				  },
				  messages: {
					  username: {
						  required: "请输入登录邮箱/手机号",
						  remote: "用户名不存在"
					  },
					  password: {
						  required: "请输入6-16位密码，区分大小写，不能使用空格！",
						  minlength: "密码最小为6位",
						  maxlength: "密码最大为16位"
					  }
				  }
			  });
		  });
	  </script>
  </head>
  <body>
    <div class="headerBar">
	  <div class="logoBar login_logo">
	    <div class="comWidth">
		  <div class="logo fl">
		    <a href="#"><img src="${ pageContext.request.contextPath }/images/logo.jpg" alt="慕课网"></a>
		  </div>
		  <h3 class="welcome_title">欢迎登陆</h3>
		</div>
	  </div>
    </div>
    <form id="form" method="post">
	  <div class="loginBox">
	    <div class="login_cont">
		  <ul class="login">
		    <li class="l_tit">用户名</li>
			<li class="mb_10">
			  <input type="text" id="username" value="请输入登录邮箱/手机号" name="username" class="login_input user_icon" />
			</li>
			<li style="display: none">请输入登录邮箱/手机号</li>
			<li class="l_tit">密码</li>
			<li class="mb_10">
			  <input type="password" id="password" name="password" class="login_input user_icon"/>
			</li>
            <li style="display: none">请输入6-16位密码，区分大小写，不能使用空格！</li>
			<li><input type="submit" value="" class="login_btn"></li>
		  </ul>
		  <div class="login_partners">
		    <p class="l_tit">使用合作方账号登陆网站</p>
			<ul class="login_list clearfix">
				<li><a href="#">QQ</a></li>
				<li><span>|</span></li>
				<li><a href="#">网易</a></li>
				<li><span>|</span></li>
				<li><a href="#">新浪微博</a></li>
				<li><span>|</span></li>
				<li><a href="#">腾讯微薄</a></li>
				<li><span>|</span></li>
				<li><a href="#">新浪微博</a></li>
				<li><span>|</span></li>
				<li><a href="#">腾讯微薄</a></li>
			</ul>
		  </div>
		</div>
	  </div>
    </form>
    <div class="hr_25"></div>
    <div class="footer">
	  <p><a href="#">慕课简介</a><i>|</i><a href="#">慕课公告</a><i>|</i> <a href="#">招纳贤士</a><i>|</i><a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
	  <p>Copyright &copy; 2006 - 2014 慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
	  <p class="web">
	    <a href="#"><img src="${ pageContext.request.contextPath }/images/webLogo.jpg" alt="logo"></a>
	    <a href="#"><img src="${ pageContext.request.contextPath }/images/webLogo.jpg" alt="logo"></a>
	    <a href="#"><img src="${ pageContext.request.contextPath }/images/webLogo.jpg" alt="logo"></a>
	    <a href="#"><img src="${ pageContext.request.contextPath }/images/webLogo.jpg" alt="logo"></a>
	  </p>
    </div>
  </body>
</html>

